<template>
<div>
    <aa></aa>
    <main>
        <div class="login">
            <div class="left">
                <h1>忘记密码</h1>
                  <div><input type="text" placeholder="手机号码"></div>
                   <div class="yz"><input type="text" placeholder="请输入密码"></div>
                    <div class="yz"><input type="text" :placeholder="choose?'验证码':'请输入密码'"><span v-show="choose">获取验证码</span></div>
                   <div class="login-l"><a href="javascript:;">登录</a> <span v-show="!choose">忘记密码?</span> </div>
            </div>
            <div class="right">
               <p>还没有账户:</p>
               <router-link to="/register">立即注册</router-link><img src="/img/jiantou.png" alt="">
            </div>
        </div>
       
    </main> <my-footer></my-footer>
    </div>
</template>
<script>
import aa from '../components/OtherHeader.vue'
import MyFooter from '../components/MyFooter.vue'
export default {
    components:{aa,MyFooter}
}
</script>
<style scoped>
main{
    position: relative;
    margin: 0 auto;
    background-image: url('/img/login_banner2.jpg');
    height:600px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
main>.login::after{
    content: '';
    display: block;
    clear: both;
}
main>.login{
    position: absolute;
    width: 540px;
    height: 380px;
    padding: 50px 80px;
    top: calc(50% - 240px);
    left: calc(50% - 350px);
    background-color: white;
}
.login .left{
    width: 380px;
    height: 100%;
    border-right: 1px solid #eeeeee;
}
.left>p{
    padding-top: 20px;
    font-size: 14px;
    position: relative;
    text-indent: 20px;
}
.login .right{
    position: relative;
    width: 159px;
    right: -26px;
    height: 100%;
    text-align: center;
    padding-top: 164px;
}
.login .right p{
    font-size: 14px;
    text-indent:20px;
}
.login .right a{
    color:#ee3843;
    font-size: 14px;
    text-decoration: none;
}
.login .right img{
   position: absolute;
    right: 30px;
    top: 189px;
    
}
.login>div{
    float: left;
}
.left>p>input{
    position: absolute;
    top:23px
}
.left>div{
    border-bottom: 1px solid #eeeeee;
    width: 280px;
    height: 70px;
}
.left h1{
    font-weight: 500;
    font-size: 26px;
    text-align: center;
    width: 280px;
}
.left>div>input{
    width: 280px;
    border: 0;
    outline: none;
    height: 70px;
}
.left .yz{
    position: relative;
}
.left .yz span{
    width: 80px;
    position: absolute;
    top: calc(50% - 16px);
    right: 0;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ee3843;
    text-align: center;
    color:#ee3843;
    border-radius: 5px;
}
.left .login-l{
    background-color: #ee3843;
    height: 45px;
    border-radius: 5px;
    margin-top: 50px;
    position: relative;
}
.left .login-l span{
    position: absolute;
    top:-35px;
    right: 0;
    font-size: 14px;
    color:#ee3843
}
.left .login-l a{
    display: inline-block;
    color:white;
    width: 100%;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 15px;
    text-decoration: none;
}
</style>
<script>
export default {
    data(){
        return{
           choose:true,
        }
    },
    methods:{
        login(){
            this.choose=true;
        },
        pwd(){
            this.choose=false;
        }
    }
}
</script>